<script setup lang="ts">
import { useIcon } from '@/hooks/web/useIcon'
import { propTypes } from '@/utils/propTypes'

const emit = defineEmits(['add', 'delete'])

defineProps({
  showAdd: propTypes.bool.def(true),
  showDel: propTypes.bool.def(true),
  showIcon: propTypes.bool.def(false)
})

const onAdd = () => {
  emit('add')
}
</script>

<template>
  <BaseButton
    v-if="showAdd"
    type="primary"
    :icon="showIcon ? useIcon({ icon: 'vi-ep:circle-plus' }) : ''"
    @click="onAdd"
  >
    新增
  </BaseButton>
  <BaseButton
    v-if="showDel"
    type="danger"
    :icon="showIcon ? useIcon({ icon: 'vi-ep:delete' }) : ''"
    @click="emit('delete')"
  >
    删除
  </BaseButton>
</template>
